import React, { useState } from 'react'
import './index.css'

export default function Item({ todo, done }) {

//两个函数实现的功能差不多,可以合并(函数柯里化)

  const [isActive, setIsActive] = useState(false)
  const mouseHandle = (bool) => {
    return ()=>{
      setIsActive(bool)
    }
  }

  return (
    <li 
    onMouseEnter={mouseHandle(true)} 
    onMouseLeave={mouseHandle(false)} 
    className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
